<template>
  <!--  页面跳转,表格数据也需要跳转-->
  <div style="padding:20px">
    <h3>编辑展会内容</h3>
    <el-form :inline="true" :model="form" style="width:80%" label-width="100px">
      <el-form-item label="展会名" prop="name">
        <el-input v-model="form.name" placeholder="请输入展会名"></el-input>
      </el-form-item>

      <el-form-item label="类别" prop="category">
        <el-input v-model="form.category" style="width:400px" placeholder="请输入类别"></el-input>
      </el-form-item>

      <el-form-item label="展会地点" prop="location">
        <el-input v-model="form.location" style="width:400px" placeholder="请输入展会地点"></el-input>
      </el-form-item>

      <el-form-item label="封面图" prop="cover">
        <el-input v-model="form.cover" style="width:400px" placeholder="请输入封面图链接"></el-input>
      </el-form-item>
<!--这个后面可以改为自动选择时间-->
      <el-form-item label="活动时间" prop="activityTime">
        <el-date-picker
            v-model="form.activityTime"
            type="daterange"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="参会人数" prop="participantNums">
        <el-input v-model="form.participantNums" style="width:400px" placeholder="请输入参会人数"></el-input>
      </el-form-item>

      <el-form-item label="详情介绍" prop="detail">
        <el-input v-model="form.detail" type="textarea" style="width:400px" placeholder="请输入详情介绍内容"></el-input>
      </el-form-item>
      
    </el-form>

    <div style="text-align:center;margin-top:30px">
      <el-button type="primary" @click="save" size="medium">提交</el-button>
      <!--      <el-button type="danger">返回列表</el-button>-->
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
var dayjs = require('dayjs')
export default {
  name: "EditExhibition",
  data(){
    return{
      form:{
        startTime:'',
        endTime:'',
        activityTime:[]
      }
    }
  },
  created(){
    const id = this.$route.query.id
    //这个方法 将后台通过id查出来的exhibition对象赋给form
    request.get("/exhibition/"+ id).then(res => {
      //将后台查出的exhibition对象赋值给form
      console.log('res.data',res.data)
      this.form = {...this.form,...res.data}
      console.log("现在的时间是=======",this.form)
      this.form.activityTime.push(this.form.startTime);
      this.form.activityTime.push(this.form.endTime);
      console.log("现在的时间是",this.form)
    })
  },
  methods: {
    save(){
      //  save方法用于提交数据
      this.form.startTime=this.form.activityTime[0],
      this.form.endTime=this.form.activityTime[1],
      request.put('/exhibition/update',this.form).then(res => {

        if (res.code === '200'){
          this.$notify.success('更新成功')
          //  新增成功后清空输入框内数据
          this.$router.push("/exhibitionList")
        } else{
          this.$notify.error(res.msg)
        }

      })
    }
  }
}
</script>

<style scoped>

</style>